<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: jshand
  Date: 2022-01-03
  Time: 14:48
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />


    <link href="${pageContext.request.contextPath}/assets/css/front.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/showdown.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/layer/2.4/layer.js"></script>


    <link href="${pageContext.request.contextPath}/assets/css/front_post_detail.css" rel="stylesheet" type="text/css" />
    <link href="//at.alicdn.com/t/font_3114070_v4iq2zbfcbd.css" rel="stylesheet" type="text/css" />

</head>
<body>

<jsp:include page="/include/top.jsp" ></jsp:include>



<!-- 博客详情 -->
<script>

    $(function(){

        var converter = new showdown.Converter()

         let html      = converter.makeHtml($("#summary").val());
        console.log(html);
        
        $(".post_summary").html(html);
    })

    function addComment(){
        let postId = $("#postId").val();
        let content = $("#content").val();

        let url = '${pageContext.request.contextPath}/front/user?'
        $.ajax(url,{
            type:"post",
            dataType:"json",
            data:{
                _type:"saveComment",
                post_id:postId,
                content:content
            },
            success:function(ret){
                if(ret.success){
                    layer.msg("发表成功");
                    commentAfterCommit();
                }else{
                    if(ret.code == 401){
                        layer.alert(ret.msg,function(){
                            location.href = '${pageContext.request.contextPath}/login.jsp'
                        })
                    }else{
                        layer.alert("发表失败")
                    }

                }
            }

        })

    }


    function commentAfterCommit(){
        let content = $("#content").val();
        let html = '<div class="comment_item">\n' +
            '                    <div class="avator">\n' +
            '                        应该是头像的 图片${user.name}\n' +
            '                    </div>\n' +
            '                    <div class="comment_detail">\n' +
            '                        <div class="author">\n' +
            '                            ${user.name}\n' +
            '                                    ' +
            '                        </div>\n' +
            '                        <div class="content" >\n' +
            content    +
            '\n' +
            '                        </div>\n' +
            '                    </div>\n' +
            '                    <div class="recomment">\n' +
            '                        回复\n' +
            '                    </div>\n' +
            '                </div>'

            $("#comment_list_hr").after(html);
        $("#content").val('');
    }

    //收藏
    function collect(){
        let postId = $("#postId").val();


        let url = '${pageContext.request.contextPath}/front/user'
        $.ajax(url,{
            type:"post",
            dataType:"json",
            data:{
                _type:"collect",
                post_id:postId
            },
            success:function(ret){
                if(ret.success){
                    layer.msg("收藏成功");

                }else{
                    if(ret.code == 401){
                        layer.alert(ret.msg,function(){
                            location.href = '${pageContext.request.contextPath}/login.jsp'
                        })
                    }else{
                        layer.alert(ret.msg)
                    }
                }






            }

        })
    }

</script>
<div class="content_warp">
    <input type="hidden" value="${post.id}" id="postId"/>
    <input type="hidden" value="${post.summary}" id="summary"/>
    <div class="lWrap">

        <div class="post_detail_wrap">
            <div class="post_title"> ${post.title} </div>
            <div class="post_meta"> ${post_user.name} ${post.created} ⋅
                ${post.views}阅读 </div>
            <hr>
            <div class="post_summary">
            <p></p>




            </div>
            <div class="note">
                注意：本文归作者所有，未经作者允许，不得转载
            </div>


            <div class="tags">
                <c:forEach items="${tagList}" var="tag">
                <a href="">#${tag.name}</a>
                </c:forEach>
            </div>
            <!-- <hr> -->
        </div>


        <style>



        </style>

        <div class="comment_list_wrap">
            <div class="comment_length">全部评论：${commentList.size()}条</div>
            <hr id="comment_list_hr">
            <c:forEach items="#{commentList}" var="comment" >
                <div class="comment_item">
                    <div class="avator">
<%--
  //TODO  等 完成 头像上传的是偶做
  --%>
                        头像
                    </div>
                    <div class="comment_detail">
                        <div class="author">
                            金山老师
                            <fmt:formatDate value="${comment.created}" pattern="yyyy-MM-dd"/>
                        </div>
                        <div class="content" >
                            ${comment.content}

                        </div>
                    </div>
                    <div class="recomment">
                        回复
                    </div>
                </div>
            </c:forEach>

            <div style="margin: 20px 20px;">我有话说</div>
            <div style="padding: 10px 20px;" >
                <textarea  style="width:90%" rows="6" id="content"></textarea>
            </div>
            <br/>
            <br/>
            <button class="blogbtn" style=""  onclick="addComment()">发送</button>
        </div>

    </div>

    <div class="rWrap">
        <div class="user">
            <div class="nickname">
                金山
            </div>

            <div class="statics">

                <div class="item litem">
                    <div class="num">${postCount}</div>
                    <div class="title">发布</div>
                </div>

                <div class="item">
                    <div class="num">${commentCount}</div>
                    <div class="title">评论</div>

                </div>

            </div>
            <div class="collect_post" onclick="collect()">
                <a href="javascript:void()" class="btn btn-primary radius"> <i class="iconfont icon-bianji_o"> </i> 收藏 </a>
            </div>
        </div>

        <div class="list-group">
            <div class="cate"> <i class="iconfont icon-zhexiantu"></i>热门文章</div>
            <hr>
            <c:choose>
                <c:when test="${hotPost.size() ==0}">
                    <div class="title">暂无文章</div>
                </c:when>
                <c:when test="${hotPost.size() >0}">
                    <c:forEach items="${hotPost}" var="post">
                        <div class="title"><a href="${pageContext.request.contextPath}/show/post?id=${post.id}">${post.title}</a></div>
                    </c:forEach>
                </c:when>
            </c:choose>

        </div>
        <div class="list-group">
            <div class="cate"> <i class="iconfont icon-liebiao"></i>最新发布</div>
            <hr>
            <c:choose>
                <c:when test="${newPost.size() ==0}">
                    <div class="title">暂无文章</div>
                </c:when>
                <c:when test="${newPost.size() >0}">
                    <c:forEach items="${newPost}" var="post">
                        <div class="title"><a href="${pageContext.request.contextPath}/show/post?id=${post.id}">${post.title}</a></div>
                    </c:forEach>
                </c:when>
            </c:choose>
        </div>

        <div class="list-group">
            <div class="cate"><i class="iconfont icon-pinglun1"></i>最新评论</div>
            <hr>
            <c:choose>
                <c:when test="${topCommentList.size() ==0}">
                    <div class="title">暂无评论 </div>
                </c:when>
                <c:when test="${topCommentList.size() >0}">
                    <c:forEach items="${topCommentList}" var="comment">
                        <div class="title"><a href="${pageContext.request.contextPath}/show/post?id=${comment.postId}">${comment.content}</a></div>

                    </c:forEach>
                </c:when>
            </c:choose>
        </div>


    </div>


</div>






























<jsp:include page="/include/foot.jsp" ></jsp:include>





</body>
</html>
